<template>
  <el-form>
    <el-row>
      <el-col :span="12">
        <el-radio-group v-model="tabPosition">
          <el-radio-button value="0">发票详情</el-radio-button>
          <el-radio-button v-if="queryParams.action === 'exaime'" value="1"
            >云采确认</el-radio-button
          >
          <el-radio-button v-if="isDisabled" value="2"
            >开票详情</el-radio-button
          >
        </el-radio-group>
      </el-col>
      <el-col :span="12" style="text-align: right">
        <el-button
          v-if="!isDisabled"
          color="#1E3485"
          @click="submitSupplierInvoice()"
          >保存</el-button
        >
        <!-- <el-button v-if="!isDisabled" color="#1E3485" @click="saveOrSubmit()"
          >保存并提交</el-button
        > -->
        <closeTagButton id="closeTagButtonRef" />
      </el-col>
    </el-row>
    <!-- 发票详情 -->
    <div v-if="tabPosition === '0'">
      <el-card shadow="never" style="margin-top: 1%">
        <template #header>基本信息</template>
        <el-form
          ref="formModelRefOne"
          label-width="120px"
          :model="formModel"
          :rules="rules"
        >
          <el-row>
            <el-col :span="18">
              <el-form-item label="采购合同" required prop="contractName">
                <el-input
                  v-model="formModel.contractName"
                  placeholder="请选择 采购合同"
                  :disabled="isDisabled"
                  @click="showContractSelectDialog"
                />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label-width="20px">
                <el-button
                  color="#1E3485"
                  :disabled="formModel.contractId == ''"
                  @click="
                    toDetail(
                      {
                        id: formModel.contractId,
                        title: formModel.contractName
                      },
                      'viewProcure'
                    )
                  "
                  >查看合同详情</el-button
                >
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="18">
              <el-form-item label="项目名称">
                <el-input v-model="formModel.projectName" disabled />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="发票来源" required>
                <el-radio-group v-model="formModel.invoiceSource" disabled>
                  <el-radio v-if="formModel.invoiceSource == '0'" value="0"
                    >对账单</el-radio
                  >
                  <el-radio value="1">结算单</el-radio>
                  <el-radio value="2">项目订单</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <el-form label-width="120px">
          <el-form-item label="结算单">
            <!-- 发票来源非结算单，且非新增或编辑时 disabled -->
            <el-button
              color="#1E3485"
              :disabled="
                !(
                  formModel.invoiceSource == '1' &&
                  (queryParams.action == 'add' || queryParams.action == 'edit')
                )
              "
              @click="showSettlementSelectDialog()"
              >选择</el-button
            >
          </el-form-item>
          <vxe-table
            border
            header-align="center"
            :column-config="{ resizable: true }"
            :row-config="{ isHover: true }"
            :data="stlmtTableData"
            :loading="stlmtTableLoading"
            size="mini"
            style="margin-left: 120px"
            :show-footer="true"
            :footer-method="footerMethod"
          >
            <vxe-column
              type="seq"
              title="序号"
              min-width="50"
              fixed="left"
              align="center"
            />
            <vxe-column
              v-for="column in stlmtTableColumns"
              :key="column.field"
              header-align="center"
              :field="column.field"
              :title="column.title"
              :align="column.align"
              :min-width="column.width"
              show-overflow
            >
              <template
                v-if="column.field === 'reconciliationDate'"
                v-slot:default="{ row }"
              >
                {{
                  row.reconciliationStartDate + "至" + row.reconciliationEndDate
                }}
              </template>
              <template v-else v-slot:default="{ row }">
                {{ row[column.field] }}
              </template>
            </vxe-column>
            <vxe-column
              title="操作"
              min-width="100"
              align="center"
              fixed="right"
            >
              <template v-slot:default="{ row }">
                <vxe-button
                  type="text"
                  size="small"
                  @click="
                    toDetail(
                      {
                        id: row.bizId,
                        title:
                          row.contractName == undefined ? '' : row.contractName,
                        action: 'view'
                      },
                      'viewSupSettlement'
                    )
                  "
                  >查看</vxe-button
                >
              </template>
            </vxe-column>
          </vxe-table>
        </el-form>
        <el-form
          v-if="formModel.paymentCycle == '1' || formModel.invoiceSource == '2'"
          label-width="120px"
          style="margin-top: 2%"
        >
          <el-form-item label="订单信息">
            <!-- 非新增或编辑时，disabled -->
            <el-button
              color="#1E3485"
              :disabled="isDisabled"
              @click="showRequisitionSelectDialog()"
              >选择</el-button
            >
          </el-form-item>
          <vxe-table
            border
            header-align="center"
            :column-config="{ resizable: true }"
            :row-config="{ isHover: true }"
            :data="orderTableData"
            :loading="orderTableLoading"
            size="mini"
            style="margin-left: 120px"
          >
            <vxe-column
              type="seq"
              title="序号"
              min-width="50"
              fixed="left"
              align="center"
            />
            <vxe-column
              v-for="column in orderTableColumns"
              :key="column.field"
              header-align="center"
              :field="column.field"
              :title="column.title"
              :align="column.align"
              :fixed="column.fixed"
              :min-width="column.width"
              show-overflow
            >
              <template
                v-if="column.field === 'priceType'"
                v-slot:default="{ row }"
              >
                <span v-if="row.priceType == '0'">锁定</span>
                <span v-if="row.priceType == '1'">浮动</span>
              </template>
              <template v-else v-slot:default="{ row }">
                {{ row[column.field] }}
              </template>
            </vxe-column>
            <vxe-column
              title="操作"
              min-width="100"
              align="center"
              fixed="right"
            >
              <template v-slot:default="{ row }">
                <vxe-button
                  type="text"
                  size="small"
                  @click="
                    toDetail(
                      {
                        id: row.bizId,
                        title: row.orderName == undefined ? '' : row.orderName,
                        action: 'view'
                      },
                      'viewSupplygoodsOrder'
                    )
                  "
                  >查看</vxe-button
                >
              </template>
            </vxe-column>
          </vxe-table>
        </el-form>
      </el-card>
      <el-card shadow="never" style="margin-top: 1%">
        <template #header>开票清单信息</template>
        <!-- 验收清单-->
        <vxe-table
          border
          show-footer
          header-align="center"
          :column-config="{ resizable: true }"
          :row-config="{ isHover: true }"
          :data="invoicingTableData"
          :loading="invoicingTableLoading"
          :footer-data="invoicingTableFooterData"
          size="mini"
        >
          <vxe-column
            type="seq"
            title="序号"
            min-width="50"
            fixed="left"
            align="center"
          />
          <vxe-column
            v-for="column in invoicingTableColumns"
            :key="column.field"
            header-align="center"
            :field="column.field"
            :title="column.title"
            :align="column.align"
            :min-width="column.width"
            show-overflow
          >
            <template v-slot:default="{ row }">
              {{ row[column.field] }}
            </template>
          </vxe-column>
          <vxe-column title="操作" min-width="100" align="center" fixed="right">
            <template v-slot:default="{ row }">
              <vxe-button
                type="text"
                size="small"
                @click="
                  toDetail(
                    {
                      id: row.orderId,
                      title: row.orderName ? '' : row.orderName,
                      action: 'view'
                    },
                    'viewSupplyOrder'
                  )
                "
                >查看</vxe-button
              >
            </template>
          </vxe-column>
        </vxe-table>
      </el-card>
      <el-card shadow="never" style="margin-top: 1%">
        <template #header>
          <span>申请开票信息</span>
          <div class="headBtn">
            <el-button
              v-if="isDisabled"
              color="#1E3485"
              @click="showFilePreview()"
              >预览/下载</el-button
            >
          </div>
        </template>
        <el-form
          ref="formModelRefTwo"
          label-width="120px"
          :model="formModel"
          :rules="rules"
        >
          <el-row>
            <el-col :span="12">
              <el-form-item label="发票类型" required prop="invoiceType">
                <el-select
                  v-model="formModel.invoiceType"
                  :disabled="isDisabled"
                >
                  <el-option label="电子发票（增值税专用发票）" value="0" />
                  <el-option label="增值税专用发票" value="1" />
                  <el-option label="增值税电子专用发票" value="2" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="开票金额" required prop="invoicingPrice">
                <el-input
                  v-model="formModel.invoicingPrice"
                  :disabled="isDisabled"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="收票人" required prop="invoicePerson">
                <el-input
                  v-model="formModel.invoicePerson"
                  :disabled="isDisabled"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="联系方式" required prop="invoicePersonPhone">
                <el-input
                  v-model="formModel.invoicePersonPhone"
                  :disabled="isDisabled"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="收票邮箱" required prop="invoicePersonEmail">
                <el-input
                  v-model="formModel.invoicePersonEmail"
                  :disabled="isDisabled"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="发票信息" />
            </el-col>
          </el-row>
        </el-form>
        <el-form
          ref="formModelRefThree"
          label-width="120px"
          style="margin-left: 60px"
          :model="formModel"
          :rules="rules"
        >
          <el-row>
            <el-col :span="24">
              <el-form-item label="机构名称">
                <el-input v-model="formModel.invoiceDeptName" disabled />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="发票抬头">
                <el-input v-model="formModel.invoiceHeader" disabled />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="纳税人识别号">
                <el-input v-model="formModel.companyTaxNo" disabled />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="开户银行">
                <el-input v-model="formModel.openBank" disabled />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="银行账户">
                <el-input v-model="formModel.bankAccount" disabled />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="注册电话">
                <el-input v-model="formModel.registerPhone" disabled />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="注册地址">
                <el-input v-model="formModel.registerAddress" disabled />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="发票备注" required prop="invoicePersonMark">
                <el-input
                  v-model="formModel.invoicePersonMark"
                  :disabled="isDisabled"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24" class="formTips">
              <span>(注：如无需备注，请填无)</span>
            </el-col>
          </el-row>
        </el-form>
      </el-card>
      <el-card v-if="isDisabled" shadow="never" style="margin-top: 1%">
        <template #header>发票核对记录</template>
        <!-- TODO 当项目发票 invoiceBindStatus == '1'(已绑定)时，显示已绑定的供应商发票信息 -->
        <vxe-table
          border
          header-align="center"
          :column-config="{ resizable: true }"
          :row-config="{ isHover: true }"
          :data="checkTableData"
          :loading="checkTableLoading"
          size="mini"
          align="center"
        >
          <vxe-column title="申请时间" field="applyDate" />
          <vxe-column title="申请人" field="applyName" />
          <vxe-column title="核对时间" field="createdAt" />
          <vxe-column title="状态" field="statusName" />
          <vxe-column title="附件" field="file">
            <template v-slot:default="{ row }">
              <div
                v-for="(fileItem, index) in JSON.parse(row.file)"
                :key="index"
              >
                <vxe-button @click="downloadFile(fileItem.fileUrl)">
                  {{ fileItem.fileOriginName }}
                </vxe-button>
              </div>
            </template>
          </vxe-column>
          <vxe-column title="说明" field="mark" />
        </vxe-table>
      </el-card>
    </div>
    <!-- 云采确认 -->
    <div v-if="tabPosition === '1'">
      <el-card shadow="never" style="margin-top: 1%">
        <template #header>发票核对</template>
        <el-form label-width="180px">
          <el-row>
            <el-col :span="24">
              <el-form-item label="发票核对" required>
                <el-radio-group v-model="confirmModel.confirmStatus">
                  <el-radio value="0">通过</el-radio>
                  <el-radio value="1">驳回</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="说明" style="width: 85%">
                <el-input
                  v-mode="confirmModel.confirmMark"
                  type="textarea"
                  :rows="3"
                  placeholder="请输入 说明"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="清单">
                <el-button
                  color="#1E3485"
                  size="small"
                  @click="showFilePreview()"
                  >预览/下载</el-button
                >
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="附件">
                <el-upload
                  v-model:file-list="confirmFile"
                  :action="uploadUrl"
                  :headers="headers"
                  :on-preview="handlePreview"
                  :on-success="confirmSuccess"
                  :before-remove="beforeRemove"
                  multiple
                  style="width: 80%"
                >
                  <el-button :icon="Upload" color="#1E3485" size="small"
                    >点击上传</el-button
                  >
                </el-upload>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24" style="text-align: center">
              <el-button color="#1E3485" @click="invoiceCheckConfirm()"
                >提交</el-button
              >
              <closeTagButton id="closeTagButtonRef" />
            </el-col>
          </el-row>
        </el-form>
      </el-card>
    </div>
    <!-- 开票信息 -->
    <div v-if="tabPosition === '2'">
      <el-card shadow="never" style="margin-top: 1%">
        <template #header>开票详情</template>
        <el-form
          ref="invoModelRef"
          label-width="180px"
          :model="formModel"
          :rules="rules"
        >
          <el-row>
            <el-col :span="8">
              <el-form-item label="发票类型" required prop="invoiceType">
                <el-select
                  v-model="formModel.invoiceType"
                  placeholder="请选择 发票类型"
                  :disabled="isInvo"
                >
                  <el-option label="电子发票（增值税专用发票）" value="0" />
                  <el-option label="增值税专用发票" value="1" />
                  <el-option label="增值税电子专用发票" value="2" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="开票日期" required prop="invoicingDate">
                <el-date-picker
                  v-model="formModel.invoicingDate"
                  type="date"
                  value-format="YYYY-MM-DD"
                  placeholder="请选择 开票日期"
                  clearable
                  :disabled="isInvo"
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="发票代码">
                <el-input
                  v-model="formModel.invoicingCode"
                  placeholder="请输入 发票代码"
                  :disabled="isInvo"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item
                label="开票金额（元）"
                required
                prop="invoicingPrice"
              >
                <el-input
                  v-model="formModel.invoicingPrice"
                  placeholder="请输入 开票金额"
                  :disabled="isInvo"
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item
                label="不含税金额（元）"
                required
                prop="invoicingNotaxPrice"
              >
                <el-input
                  v-model="formModel.invoicingNotaxPrice"
                  placeholder="请输入 不含税金额"
                  :disabled="isInvo"
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="发票号码" required prop="invoicingNo">
                <el-input
                  v-model="formModel.invoicingNo"
                  placeholder="请输入 发票号码"
                  :disabled="isInvo"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="发票税率（%）" required prop="invoicingRate">
                <el-input
                  v-model="formModel.invoicingRate"
                  placeholder="请输入 发票税率"
                  :disabled="isInvo"
                  @blur="invoicingRatechange"
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="税额">
                <el-input v-mode="formModel.invoicingRatePrice" disabled />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="发票附件" required>
                <el-upload
                  v-model:file-list="invoFile"
                  :action="uploadUrl"
                  :headers="headers"
                  :on-preview="handlePreview"
                  :on-success="invoFileSuccess"
                  multiple
                  style="width: 80%"
                >
                  <el-button :icon="Upload" color="#1E3485" size="small"
                    >点击上传</el-button
                  >
                </el-upload>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="XML格式附件">
                <el-upload
                  v-model:file-list="invoXMLFile"
                  :action="uploadUrl"
                  :headers="headers"
                  :on-preview="handlePreview"
                  :on-success="invoXMLFileSuccess"
                  multiple
                  style="width: 80%"
                >
                  <el-button :icon="Upload" color="#1E3485" size="small"
                    >点击上传</el-button
                  >
                </el-upload>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="备注">
                <el-input
                  v-model="formModel.invoicingMark"
                  type="textarea"
                  :disabled="isInvo"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24" style="text-align: center">
              <el-button
                v-if="!isInvo"
                color="#1E3485"
                @click="saveInvoiceInvoInfo()"
                >提交</el-button
              >
              <closeTagButton id="closeTagButtonRef" />
            </el-col>
          </el-row>
        </el-form>
      </el-card>
    </div>
    <div class="dialogs">
      <procureContractSelectDialog
        :visible="contractSelectDialogVisible"
        @close="closeContractSelectDialog"
        @confirm="contractSelectConfirm"
      />
      <settlementSelectDialog
        :contractId="formModel.contractId"
        :visible="settlementSelectDialogVisible"
        @close="closeSettlementSelectDialog"
        @confirm="settlementSelectConfirm"
      />
      <requisitionSelectDialog
        :contractId="formModel.contractId"
        :visible="requisitionSelectDialogVisible"
        @close="closeRequisitionSelectDialog"
        @confirm="requisitionSelectConfirm"
      />
      <filePreview
        :visible="filePreviewVisible"
        :fileId="fileId"
        :fileType="fileType"
        :fileUrl="fileUrl"
        @close="closeFilePreview"
      />
    </div>
  </el-form>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from "vue";
import { useRoute } from "vue-router";
import { ElMessage } from "element-plus";
import { Upload } from "@element-plus/icons-vue";
import type {
  FormInstance,
  UploadUserFile,
  UploadProps,
  UploadFile
} from "element-plus";
import type { VxeTablePropTypes } from "vxe-table";
import filePreview from "@/components/filePreview.vue";
import closeTagButton from "@/components/closeTagButton.vue";
import procureContractSelectDialog from "./dialog/procureContractSelectDialog.vue";
import settlementSelectDialog from "./dialog/PjctSettlementSelectDialog.vue";
import requisitionSelectDialog from "./dialog/requisitionSelectDialog.vue";
import { headers, uploadUrl } from "@/api/utils";
import { useDetail } from "@/views/ERP_InvoiceManage/ERP_SupplierInvoice/components/utils/hooks";
import {
  getSupInvoiceListByStlmt,
  getSupInvoiceListByOrder,
  getInvoiceBankInfo,
  saveSupInvoiceInfo,
  getSupInvoiceDetail,
  getSupInvoiceSettlementList,
  getSupInvoiceOrderList,
  getSupInvoiceInfoListFooter,
  getSupInvoiceInfoList,
  getSupInvoiceCheckListData,
  supInvoiceConfirm,
  saveSupInvoiceInvoDetail,
  submitSupInvoice
} from "@/api/ERP_InvoiceManage";

///////////////////////// 公共 /////////////////////////
// 路由跳转
const { toDetail } = useDetail();
const route = useRoute();
const queryParams = route.query;
// 默认显示页
let tabPosition = ref("0");
///////////////////////// 数据准备 /////////////////////////
// 表单数据
let formModel = reactive({
  // 特征值
  id: "", // 项目发票ID
  // 合同信息
  contractId: "", // 合同ID
  contractName: "", // 合同名称
  saleContractId: "", // 销售合同ID
  purchaseDeptId: "", // 采购部门ID - 查询发票info以及保存发票时使用
  purchaseDeptName: "", // 采购部门名称
  projectId: "", // 项目ID
  projectName: "", // 项目名称
  paymentCycle: "", // 付款周期 0-到货结算, 1-款清发货, 2-月度结算
  invoiceSource: "1", // 发票来源 0-对账单 1-结算单 2-项目订单
  stlmtIdList: [], // 结算单ID数组
  orderIdList: [], // 订单ID数组
  // 发票信息
  invoiceBindStatus: "", // 发票绑定状态 0-未绑定 1-已绑定（新增/编辑时不传参）
  invoiceType: "0", // 发票类型
  invoicingPrice: "", // 开票金额
  invoicePerson: "", // 收票人
  invoicePersonPhone: "", // 联系方式
  invoicePersonEmail: "", // 收票邮箱
  invoiceDeptName: "", // 机构名称
  invoiceHeader: "", // 发票抬头
  companyTaxNo: "", // 纳税人识别号
  openBank: "", // 开户银行
  bankAccount: "", // 银行账户
  registerPhone: "", // 注册电话
  registerAddress: "", // 注册地址
  invoicePersonMark: "", // 发票备注
  invoicingDate: "", // 开票日期
  invoicingNo: "", // 发票号码
  invoicingNotaxPrice: "", // 不含税金额
  invoicingCode: "", // 发票代码
  invoicingRate: "", // 税率
  invoicingRatePrice: "", // 税额
  invoicingFile: "", // 发票附件
  invoicingXmlFile: "", // 发票XML格式附件
  invoicingMark: "" // 开票备注
});
let formModelRefOne = ref();
let formModelRefTwo = ref();
let formModelRefThree = ref();
let invoModelRef = ref();
// 表单可否输入
let isDisabled = ref(
  queryParams.action != "add" && queryParams.action != "edit"
);
// 开票表单可否输入
let isInvo = ref(
  queryParams.action != "invo" && queryParams.action != "reInvo"
);
// 结算表数据
let stlmtTableData = ref([]);
let stlmtTableLoading = ref(false);
let stlmtTableColumns = reactive([
  {
    field: "settlementDate",
    title: "结算时间",
    width: 120,
    align: "center"
  },
  {
    field: "reconciliationDate",
    title: "对账周期",
    width: 180,
    align: "center"
  },
  {
    field: "settlementTotalPrice",
    title: "结算实际含税总价（元）",
    width: 180,
    align: "right"
  },
  {
    field: "settlementNum",
    title: "对账单数量",
    width: 120,
    align: "center"
  },
  {
    field: "orderNum",
    title: "订单数量",
    width: 120,
    align: "center"
  },
  {
    field: "ykorderInvoiceNum",
    title: "已开票订单数",
    width: 120,
    align: "center"
  },
  {
    field: "orderInvoiceNum",
    title: "本次开票订单数",
    width: 120,
    align: "center"
  }
]);
// 项目订单表数据
let orderTableData = ref([]);
let orderTableLoading = ref(false);
let orderTableColumns = reactive([
  {
    field: "orderSn",
    title: "订单编号",
    width: 150,
    align: "left",
    fixed: "left"
  },
  {
    field: "orderName",
    title: "订单名称",
    width: 150,
    align: "left",
    fixed: "left"
  },
  {
    field: "supplierName",
    title: "供应商名称",
    width: 150,
    align: "left"
  },
  {
    field: "taxTotalPrice",
    title: "含税总价（元）",
    width: 150,
    align: "right"
  },
  {
    field: "priceType",
    title: "价格类型",
    width: 150,
    align: "center"
  },
  {
    field: "receivingTime",
    title: "计划收货时间",
    width: 150,
    align: "center"
  },
  {
    field: "flowSubmitDate",
    title: "订单下单时间",
    width: 150,
    align: "center"
  },
  {
    field: "supplyConfirmDate",
    title: "订单确认时间",
    width: 150,
    align: "center"
  }
]);
// 开票清单表数据
let invoicingTableData = ref([]);
let invoicingTableFooterData = ref<VxeTablePropTypes.FooterData>([]);
let invoicingTableLoading = ref(false);
let invoicingTableColumns = reactive([
  {
    field: "reconciliationCycle",
    title: "对账周期",
    width: 150,
    align: "left"
  },
  {
    field: "orderNo",
    title: "订单编号",
    width: 150,
    align: "left"
  },
  {
    field: "orderName",
    title: "订单名称",
    width: 150,
    align: "left"
  },
  {
    field: "supplyDate",
    title: "供货时间",
    width: 150,
    align: "center"
  },
  {
    field: "receiveDate",
    title: "收货时间",
    width: 150,
    align: "center"
  },
  {
    field: "orderPrice",
    title: "订单含税总价（元）",
    width: 150,
    align: "right"
  },
  {
    field: "reconciliationPrice",
    title: "确认含税总价（元）",
    width: 150,
    align: "right"
  }
]);
// 核对记录表
let checkTableData = ref([]);
let checkTableLoading = ref(false);
// 确认表单数据
let confirmModel = reactive({
  confirmStatus: "0", // 发票核对 0-确认 1-驳回
  confirmMark: "", // 核对说明
  confirmFile: "" // 核对附件
});
// 表单校验
const rules = reactive({
  contractName: [
    { required: true, message: "请选择采购合同", trigger: "blur" }
  ],
  invoiceType: [{ required: true, message: "请选择发票类型", trigger: "blur" }],
  invoicingPrice: [
    { required: true, message: "请输入开票金额", trigger: "blur" }
  ],
  invoicePerson: [{ required: true, message: "请输入收票人", trigger: "blur" }],
  invoicePersonPhone: [
    { required: true, message: "请输入联系方式", trigger: "blur" }
  ],
  invoicePersonEmail: [
    { required: true, message: "请输入收票邮箱", trigger: "blur" }
  ],
  invoicePersonMark: [
    { required: true, message: "请输入发票备注", trigger: "blur" }
  ],
  invoicingDate: [
    { required: true, message: "请选择开票日期", trigger: "blur" }
  ],
  // invoicingCode: [
  //   { required: true, message: "请输入发票代码", trigger: "blur" }
  // ],
  invoicingNotaxPrice: [
    { required: true, message: "请输入不含税金额", trigger: "blur" }
  ],
  invoicingNo: [{ required: true, message: "请输入发票号码", trigger: "blur" }],
  invoicingRate: [
    { required: true, message: "请输入发票税率", trigger: "blur" }
  ]
});
///////////////////////// 弹窗类 /////////////////////////
// 选择项目弹窗
let contractSelectDialogVisible = ref(false);
function showContractSelectDialog() {
  contractSelectDialogVisible.value = true;
}
function closeContractSelectDialog(val: boolean) {
  contractSelectDialogVisible.value = val;
}
const contractSelectConfirm = async data => {
  // 基本信息表单
  formModel.contractId = data.contractId;
  formModel.contractName = data.contractName;
  formModel.saleContractId = data.saleContractId;
  formModel.purchaseDeptId = data.purchaseDeptId;
  formModel.purchaseDeptName = data.purchaseDeptName;
  formModel.projectId = data.projectId;
  formModel.projectName = data.projectName;
  formModel.paymentCycle = data.paymentCycle;
  stlmtTableData.value = [];
  orderTableData.value = [];
  // 根据付款周期，展示结算单的选择还是项目订单的选择
  if (formModel.paymentCycle != "1") {
    formModel.invoiceSource = "1";
  } else {
    formModel.invoiceSource = "2";
  }
  // 申请开票信息发票表单
  getInvoiceBankDetail();
};
// 选择结算单弹窗
let settlementSelectDialogVisible = ref(false);
function showSettlementSelectDialog() {
  if (formModel.contractName === "") {
    ElMessage.error("请先选择采购合同");
    return;
  } else {
    settlementSelectDialogVisible.value = true;
  }
}
function closeSettlementSelectDialog(val: boolean) {
  settlementSelectDialogVisible.value = val;
}
const settlementSelectConfirm = async data => {
  // 结算单内容
  let sum = 0;
  for (let i = 0; i < data.dataList.length; i++) {
    const exists = stlmtTableData.value.some(
      item => item.id === data.dataList[i].id
    );
    if (exists) {
      ElMessage.error("结算数据: " + data.dataList[i].id + "已存在");
    } else {
      stlmtTableData.value.push({
        bizId: data.dataList[i].id,
        settlementTotalPrice: data.dataList[i].reconciliationPrice,
        ...data.dataList[i]
      });
      sum += Number(data.dataList[i].reconciliationPrice);
    }
  }
  formModel.invoicingPrice = sum.toString();
  // 开票清单信息表
  getInvoiceListByStlmtList();
};
// 选择项目订单弹窗
let requisitionSelectDialogVisible = ref(false);
function showRequisitionSelectDialog() {
  if (formModel.contractName === "") {
    ElMessage.error("请先选择采购合同");
    return;
  } else {
    requisitionSelectDialogVisible.value = true;
  }
}
function closeRequisitionSelectDialog(val: boolean) {
  requisitionSelectDialogVisible.value = val;
}
const requisitionSelectConfirm = async data => {
  // 项目订单内容
  for (let i = 0; i < data.dataList.length; i++) {
    const exists = orderTableData.value.some(
      item => item.id === data.dataList[i].id
    );
    if (exists) {
      ElMessage.error("结算数据: " + data.dataList[i].id + "已存在");
    } else {
      orderTableData.value.push({
        bizId: data.dataList[i].id,
        ...data.dataList[i]
      });
    }
  }
  // 开票清单信息表
  getInvoiceListByOrderList();
};
// 预览/下载 弹窗
let filePreviewVisible = ref(false);
let fileId = ref("");
let fileType = ref("");
let fileUrl = ref("");
function showFilePreview() {
  fileId.value = queryParams.id as string;
  fileType.value = "pjctinvoice";
  filePreviewVisible.value = true;
}
function closeFilePreview(val: boolean) {
  filePreviewVisible.value = val;
}
// 上传按钮&相关事件
let confirmFile = ref<UploadUserFile[]>([]);
let invoFile = ref<UploadUserFile[]>([]);
let invoXMLFile = ref<UploadUserFile[]>([]);
let confirmFileList = [];
let invoFileList = [];
let invoXMLFileList = [];
const handlePreview: UploadProps["onPreview"] = (uploadFile: UploadFile) => {
  if (uploadFile.response) {
    const response = uploadFile.response as unknown as any;
    window.open(response.data.url, "_blank");
  } else {
    window.open(uploadFile.url, "_blank");
  }
};
const beforeRemove = (uploadFile, uploadFiles) => {
  if (queryParams.action != "invo" && queryParams.action != "reInvo") {
    ElMessage.error("当前状态文件不可删除");
    return false;
  }
};
// 文件上传成功,传参赋值，格式修改
const confirmSuccess = uploadFile => {
  confirmFileList.push(uploadFile.data);
  const formatterObj = [];
  for (let i in confirmFileList) {
    let tempvalue: any = {};
    tempvalue.fileUrl = confirmFileList[i].url;
    tempvalue.fileSuffix =
      "." +
      confirmFileList[i].name.substring(
        confirmFileList[i].name.lastIndexOf(".") + 1
      );
    tempvalue.fileOriginName = confirmFileList[i].name;
    formatterObj.push(tempvalue);
  }
  confirmModel.confirmFile = JSON.stringify(formatterObj);
};
const invoFileSuccess = uploadFile => {
  invoFileList.push(uploadFile.data);
  const formatterObj = [];
  for (let i in invoFileList) {
    let tempvalue: any = {};
    tempvalue.fileUrl = invoFileList[i].url;
    tempvalue.fileSuffix =
      "." +
      invoFileList[i].name.substring(invoFileList[i].name.lastIndexOf(".") + 1);
    tempvalue.fileOriginName = invoFileList[i].name;
    formatterObj.push(tempvalue);
  }
  formModel.invoicingFile = JSON.stringify(formatterObj);
};
const invoXMLFileSuccess = uploadFile => {
  invoXMLFileList.push(uploadFile.data);
  const formatterObj = [];
  for (let i in invoXMLFileList) {
    let tempvalue: any = {};
    tempvalue.fileUrl = invoXMLFileList[i].url;
    tempvalue.fileSuffix =
      "." +
      invoXMLFileList[i].name.substring(
        invoXMLFileList[i].name.lastIndexOf(".") + 1
      );
    tempvalue.fileOriginName = invoXMLFileList[i].name;
    formatterObj.push(tempvalue);
  }
  formModel.invoicingXmlFile = JSON.stringify(formatterObj);
};
// 表格附件预览
function downloadFile(fileUrl) {
  window.open(fileUrl, "_blank");
}
///////////////////////// 数据请求 /////////////////////////
// 申请开票信息发票表单
async function getInvoiceBankDetail() {
  let paramsForInvoice: ApiParams = {};
  // paramsForInvoice.id = formModel.purchaseDeptId;
  paramsForInvoice.id = 27609;
  try {
    const response: ApiResponse = await getInvoiceBankInfo(paramsForInvoice);
    if (response.code === 200) {
      formModel.invoiceDeptName = response.data.deptName;
      formModel.invoiceHeader = response.data.orgName;
      formModel.companyTaxNo = response.data.orgCredit;
      formModel.openBank = response.data.depositBank;
      formModel.bankAccount = response.data.bankAccount;
      formModel.registerPhone = response.data.contactMobile;
      formModel.registerAddress = response.data.companyAddress;
    } else {
      ElMessage.error("获取开票信息数据失败: " + response.msg);
    }
  } catch {}
}
// 获取结算单绑定的验收清单列表（获取开票信息列表）
async function getInvoiceListByStlmtList() {
  invoicingTableLoading.value = true;
  let params: ApiParams = {};
  params.pageIndex = 1;
  params.pageSize = 999;
  let idList = [];
  for (let j = 0; j < stlmtTableData.value.length; j++) {
    idList.push(stlmtTableData.value[j].id);
  }
  params.bizidList = idList;
  try {
    const response: ApiResponse = await getSupInvoiceListByStlmt(params);
    if (response.code === 200) {
      invoicingTableData.value = response.data.records;
    } else {
      ElMessage.error("获取开票清单信息表失败: " + response.msg);
    }
  } catch (error) {
  } finally {
    invoicingTableLoading.value = false;
  }
}
// 获取项目订单绑定的验收清单列表（获取开票信息列表）
async function getInvoiceListByOrderList() {
  invoicingTableLoading.value = true;
  let params: ApiParams = {};
  params.pageIndex = 1;
  params.pageSize = 999;
  let idList = [];
  for (let j = 0; j < orderTableData.value.length; j++) {
    idList.push(orderTableData.value[j].id);
  }
  params.bizidList = idList;
  try {
    const response: ApiResponse = await getSupInvoiceListByOrder(params);
    if (response.code === 200) {
      invoicingTableData.value = response.data.records;
    } else {
      ElMessage.error("获取开票清单信息表失败: " + response.msg);
    }
  } catch (error) {
  } finally {
    invoicingTableLoading.value = false;
  }
}
// 新增/编辑 项目发票
async function submitSupplierInvoice() {
  // 表单校验
  const formsRefs1 = [formModelRefOne];
  const formsRefs2 = [formModelRefTwo];
  const formsRefs3 = [formModelRefThree];
  const validStatus = await validateFormSequentially(formsRefs1);
  if (!validStatus) {
    return;
  }
  const validStatus2 = await validateFormSequentially(formsRefs2);
  if (!validStatus2) {
    return;
  }
  const validStatus3 = await validateFormSequentially(formsRefs3);
  if (!validStatus3) {
    return;
  }
  // 拼接发票内容
  let params: ApiParams = {
    reconciliationList: [],
    purchaseapplyIdList: []
  };
  if (queryParams.action != "add") {
    params.id = formModel.id;
  }
  params.contractId = formModel.contractId;
  params.contractName = formModel.contractName;
  params.invoiceSource = formModel.invoiceSource;
  params.invoiceType = formModel.invoiceType;
  params.invoicingPrice = formModel.invoicingPrice;
  params.invoicePerson = formModel.invoicePerson;
  params.invoicePersonPhone = formModel.invoicePersonPhone;
  params.invoicePersonEmail = formModel.invoicePersonEmail;
  params.invoiceDeptId = formModel.purchaseDeptId;
  params.invoiceDeptName = formModel.invoiceDeptName;
  params.invoiceHeader = formModel.invoiceHeader;
  params.companyTaxNo = formModel.companyTaxNo;
  params.openBank = formModel.openBank;
  params.bankAccount = formModel.bankAccount;
  params.registerPhone = formModel.registerPhone;
  params.registerAddress = formModel.registerAddress;
  params.invoicingMark = formModel.invoicePersonMark;
  for (let i = 0; i < stlmtTableData.value.length; i++) {
    params.reconciliationList.push(stlmtTableData.value[i].bizId);
  }
  for (let i = 0; i < orderTableData.value.length; i++) {
    params.purchaseapplyIdList.push(orderTableData.value[i].bizId);
  }
  try {
    const response: ApiResponse = await saveSupInvoiceInfo(params);
    if (response.code === 200) {
      ElMessage.success("保存成功");
      document.getElementById("closeTagButtonRef").click();
    } else {
      ElMessage.error("保存失败: " + response.msg);
    }
  } catch (error) {}
}
// 获取项目发票详情
async function getProjectInvoiceInfo() {
  let params: ApiParams = {};
  params.id = queryParams.id;
  try {
    const response: ApiResponse = await getSupInvoiceDetail(params);
    if (response.code === 200) {
      for (let key in response.data) {
        formModel[key] = response.data[key];
      }
      formModel.invoicingNotaxPrice = (
        Number(formModel.invoicingPrice) /
        (1 + Number(formModel.invoicingRate) / 100)
      )
        .toFixed(4)
        .toString();
      // 开票附件
      JSON.parse(response.data.invoicingFile).forEach(file => {
        invoFile.value.push({
          name: file.fileOriginName,
          url: file.fileUrl
        });
      });
      JSON.parse(response.data.invoicingXmlFile).forEach(file => {
        invoXMLFile.value.push({
          name: file.fileOriginName,
          url: file.fileUrl
        });
      });
    } else {
      ElMessage.error("获取项目发票详情失败: " + response.msg);
    }
  } catch (error) {}
}
// 获取项目发票绑定的结算单列表
async function getRelatedSettlementList() {
  stlmtTableLoading.value = true;
  let params: ApiParams = {};
  params.pageIndex = 1;
  params.pageSize = 999;
  params.invoiceId = queryParams.id;
  try {
    const response: ApiResponse = await getSupInvoiceSettlementList(params);
    if (response.code === 200) {
      stlmtTableData.value = response.data.records;
    } else {
      ElMessage.error("获取项目发票绑定的结算单列表失败: " + response.msg);
    }
  } catch (error) {
  } finally {
    stlmtTableLoading.value = false;
  }
}
// 获取项目发票绑定的项目订单列表
async function getRelatedOrderList() {
  orderTableLoading.value = true;
  let params: ApiParams = {};
  params.pageIndex = 1;
  params.pageSize = 999;
  params.invoiceId = queryParams.id;
  try {
    const response: ApiResponse = await getSupInvoiceOrderList(params);
    if (response.code === 200) {
      orderTableData.value = response.data.records;
    } else {
      ElMessage.error("获取项目发票绑定的项目订单列表失败: " + response.msg);
    }
  } catch (error) {
  } finally {
    orderTableLoading.value = false;
  }
}
// 获取项目发票的开票信息列表
async function getInvoicingList() {
  invoicingTableLoading.value = true;
  let params: ApiParams = {};
  params.pageIndex = 1;
  params.pageSize = 999;
  params.id = queryParams.id;
  try {
    const response: ApiResponse = await getSupInvoiceInfoList(params);
    if (response.code === 200) {
      invoicingTableData.value = response.data.records;
    } else {
      ElMessage.error("获取项目发票的开票信息列表失败: " + response.msg);
    }
  } catch (error) {
  } finally {
    invoicingTableLoading.value = false;
  }
}
// 获取项目发票的开票信息列表页脚数据
async function getInvoicingListFooter() {
  let params: ApiParams = {};
  params.id = queryParams.id;
  const response: ApiResponse = await getSupInvoiceInfoListFooter(params);
  if (response.code === 200 && response.data) {
    invoicingTableFooterData.value = [];
    invoicingTableFooterData.value.push({
      orderPrice: response.data.countOrderPrice,
      reconciliationPrice: response.data.countReconciliationPrice
    });
  } else {
    // ElMessage.error("获取开票清单页脚数据失败: " + response.msg);
  }
}
// 获取发票核对记录表
async function getInvoiceCheckList() {
  checkTableLoading.value = true;
  let params: ApiParams = {};
  params.bizId = queryParams.id;
  try {
    const response: any = await getSupInvoiceCheckListData(params);
    if (response.code === 200) {
      checkTableData.value = response.data;
    } else {
      ElMessage.error("获取发票核对记录表失败: " + response.msg);
    }
  } catch (error) {
  } finally {
    checkTableLoading.value = false;
  }
}
// 发票核对确认
async function invoiceCheckConfirm() {
  let params: ApiParams = {};
  params.id = queryParams.id;
  params.isConfirm = confirmModel.confirmStatus === "0" ? true : false;
  params.file = confirmModel.confirmFile;
  params.invoiceConfirmMark = confirmModel.confirmMark;
  try {
    const response: ApiResponse = await supInvoiceConfirm(params);
    if (response.code === 200) {
      ElMessage.success("提交成功");
      document.getElementById("closeTagButtonRef").click();
    } else {
      ElMessage.error("提交失败: " + response.msg);
    }
  } catch (error) {}
}
// 保存开票数据 开票/重新开票
async function saveInvoiceInvoInfo() {
  // 表单校验
  const formsRefs = [invoModelRef];
  const validStatus = await validateFormSequentially(formsRefs);
  if (!validStatus) {
    return;
  }
  if (formModel.invoicingFile == "") {
    return ElMessage.error("请上传发票附件");
  }
  // 保存开票数据
  let params: ApiParams = {
    reconciliationList: [],
    purchaseapplyIdList: []
  };
  params.id = queryParams.id;
  params.contractId = formModel.contractId;
  params.invoiceType = formModel.invoiceType;
  params.invoicingDate = formModel.invoicingDate;
  params.invoicingCode = formModel.invoicingCode;
  params.invoicingPrice = formModel.invoicingPrice;
  params.invoicingNotaxPrice = formModel.invoicingNotaxPrice;
  params.invoicingNo = formModel.invoicingNo;
  params.invoicingRate = formModel.invoicingRate;
  params.invoicingRatePrice = formModel.invoicingRatePrice;
  params.invoicingMark = formModel.invoicingMark;
  params.invoicingFile = formModel.invoicingFile;
  params.invoicingXmlFile = formModel.invoicingXmlFile;
  for (let i = 0; i < stlmtTableData.value.length; i++) {
    params.reconciliationList.push(stlmtTableData.value[i].bizId);
  }
  for (let i = 0; i < orderTableData.value.length; i++) {
    params.purchaseapplyIdList.push(orderTableData.value[i].bizId);
  }
  try {
    const response: ApiResponse = await saveSupInvoiceInvoDetail(params);
    if (response.code === 200) {
      ElMessage.success("开票成功");
      document.getElementById("closeTagButtonRef").click();
    } else {
      ElMessage.error("开票失败: " + response.msg);
    }
  } catch (error) {}
}
///保存并提交
async function saveOrSubmit() {
  // 表单校验
  const formsRefs1 = [formModelRefOne];
  const formsRefs2 = [formModelRefTwo];
  const formsRefs3 = [formModelRefThree];
  const validStatus = await validateFormSequentially(formsRefs1);
  if (!validStatus) {
    return;
  }
  const validStatus2 = await validateFormSequentially(formsRefs2);
  if (!validStatus2) {
    return;
  }
  const validStatus3 = await validateFormSequentially(formsRefs3);
  if (!validStatus3) {
    return;
  }
  // 拼接发票内容
  let params: ApiParams = {
    reconciliationList: [],
    purchaseapplyIdList: []
  };
  if (queryParams.action != "add") {
    params.id = formModel.id;
  }
  params.contractId = formModel.contractId;
  params.contractName = formModel.contractName;
  params.invoiceSource = formModel.invoiceSource;
  params.invoiceType = formModel.invoiceType;
  params.invoicingPrice = formModel.invoicingPrice;
  params.invoicePerson = formModel.invoicePerson;
  params.invoicePersonPhone = formModel.invoicePersonPhone;
  params.invoicePersonEmail = formModel.invoicePersonEmail;
  params.invoiceDeptId = formModel.purchaseDeptId;
  params.invoiceDeptName = formModel.invoiceDeptName;
  params.invoiceHeader = formModel.invoiceHeader;
  params.companyTaxNo = formModel.companyTaxNo;
  params.openBank = formModel.openBank;
  params.bankAccount = formModel.bankAccount;
  params.registerPhone = formModel.registerPhone;
  params.registerAddress = formModel.registerAddress;
  params.invoicingMark = formModel.invoicePersonMark;
  for (let i = 0; i < stlmtTableData.value.length; i++) {
    params.reconciliationList.push(stlmtTableData.value[i].bizId);
  }
  for (let i = 0; i < orderTableData.value.length; i++) {
    params.purchaseapplyIdList.push(orderTableData.value[i].bizId);
  }
  try {
    const response: ApiResponse = await saveSupInvoiceInfo(params);
    if (response.code === 200) {
      let param: ApiParams = {};
      param.id = response.data;
      const res: ApiResponse = await submitSupInvoice(param);
      if (res.code === 200) {
        ElMessage.success("提交成功");
        document.getElementById("closeTagButtonRef").click();
      } else {
        ElMessage.error("提交失败: " + res.msg);
      }
    } else {
      ElMessage.error("提交失败: " + response.msg);
    }
  } catch (error) {}
}
//合计行
function footerMethod({ columns, data }) {
  return [
    columns.map((column, columnIndex) => {
      if (columnIndex === 0) {
        return "合计";
      }
      if (
        [
          "settlementTotalPrice",
          "settlementNum",
          "orderNum",
          "ykorderInvoiceNum",
          "orderInvoiceNum"
        ].includes(column.field)
      ) {
        return sumNum(stlmtTableData.value, column.field);
      }
      return null;
    })
  ];
}
const sumNum = (list: any[], field: string) => {
  let count = 0;
  list.forEach(item => {
    if (item[field]) {
      count += Number(item[field]);
    }
  });
  return count;
};

const invoicingRatechange = () => {
  formModel.invoicingNotaxPrice = (
    Number(formModel.invoicingPrice) /
    (1 + Number(formModel.invoicingRate) / 100)
  )
    .toFixed(4)
    .toString();
};
///////////////////////// 公共 /////////////////////////
// 多个el-card的表单校验
async function validateFormSequentially(formsRefs) {
  for (const formRef of formsRefs) {
    try {
      const valid = await formRef.value.validate();
      if (!valid) {
        return false;
      } else {
        return true;
      }
    } catch (error) {
      ElMessage.error("输入有误，请检查！");
      return false;
    }
  }
}
// 初始化
onMounted(async () => {
  // 云采确认
  if (queryParams.action === "exaime") {
    tabPosition.value = "1";
  }
  // 开票/重新开票
  else if (queryParams.action === "invo" || queryParams.action === "reInvo") {
    tabPosition.value = "2";
  }
  // 非新增
  if (queryParams.action != "add") {
    formModel.id = queryParams.id as string;
    // 获取项目发票详情
    await getProjectInvoiceInfo();
    // 获取结算单列表
    await getRelatedSettlementList();
    // 获取项目订单列表
    if (formModel.invoiceSource == "2") {
      await getRelatedOrderList();
    }
    // 获取开票信息列表
    await getInvoicingList();
    // 获取开票信息列表页脚数据
    await getInvoicingListFooter();
    // 获取发票核对记录表
    await getInvoiceCheckList();
    // 获取发票开票信息
    await getInvoiceBankDetail();
  }
});
</script>

<style lang="scss" scoped>
.headBtn {
  display: inline;
  float: right;
}
.formTips {
  margin-left: 60px;
  color: rgba(70, 70, 70, 0.5);
}
</style>
